
<template>
  <div class="home">
    <div>
      <van-search
        @click="goToPropup"
        v-model="searchValue"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
      />
      <!-- 轮播图 -->
      <SwiperHome @toDetail="toDetail2" :bannerArr="bannerArr"></SwiperHome>
      <!-- 宫格 -->
      <van-grid :column-num="5">
        <van-grid-item
          @click="toDetail(i)"
          v-for="i in channel"
          :key="i.id"
          :icon="i.icon_url"
          :text="i.name"
        />
      </van-grid>
      <!-- 品牌制造商直供 -->
      <div class="title">品牌制造商直供</div>
      <ul class="brand">
        <li @click="toDetail(i)" v-for="i in brandList" :key="i.id">
          <img :src="i.pic_url" alt />
          <h4>{{i.name}}</h4>
          <div>{{i.floor_price | filterMoney}}</div>
        </li>
      </ul>
      <!-- 专题精选 -->
      <div class="title">专题精选</div>
      <div class="myTop">
        <van-swipe :autoplay="3000" :show-indicators="false" :loop="false">
          <van-swipe-item v-for="i in topicList" :key="i.id">
            <img :src="i.item_pic_url" alt />
            <div>
              {{i.title}}
              <span class="mySpan">{{i.price_info |filterMoney}}</span>
            </div>
            <p>{{i.subtitle}}</p>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="zw"></div>
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// import axios from 'axios'
import { GetHomeData } from '@/api/home'
import SwiperHome from '../components/Swiper'
export default {
  components: {
    SwiperHome
  },
  data () {
    return {
      searchValue: '',
      // 轮播图数据
      bannerArr: [],
      // 导航数据
      channel: [],
      brandList: [],
      topicList: []
    }
  },
  methods: {
    async getHome () {
      const res = await GetHomeData()
      console.log(res.data)
      if (res.errno === 0) {
        this.bannerArr = res.data.banner
        this.channel = res.data.channel
        this.brandList = res.data.brandList
        this.topicList = res.data.topicList
      }
    },
    // 跳转路由
    goToPropup () {
      this.$router.push('home/propup')
      this.searchValue = ''
    },
    toDetail (i) {
      this.$router.push({
        path: 'home/propup',
        query: { name: i.name }
      })
    },
    toDetail2 (i) {
      this.$router.push({
        path: 'home/propup',
        query: { name: i }
      })
    }
  },
  created () {
    this.getHome()
  }
}
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 50px;
}

// .zw {
//   height: 0.7rem;
// }
.myTop {
  background-color: #fff;
  text-align: center;
  div {
    margin-bottom: 0.05rem;
    .mySpan {
      color: darkred;
      font-size: 0.14rem;
    }
  }
  p {
    margin-bottom: 0.1rem;
  }
  img {
    width: 100%;
    height: 2rem;
    display: block;
  }
  .van-swipe {
    margin-right: 0.1rem;
    .van-swipe-item {
      padding-left: 0.1rem;
      box-sizing: border-box;
    }
  }
}

.title {
  height: 0.5rem;
  line-height: 0.5rem;
  background-color: #fff;
  text-align: center;
  margin-top: 0.2rem;
}
.brand {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
  li {
    width: 49%;
    position: relative;
    margin-bottom: 0.1rem;
    img {
      width: 100%;
      display: block;
      filter: brightness(0.9);
    }
    h4 {
      position: absolute;
      left: 10px;
      top: 0%;
      line-height: 0.3rem;
    }
    div {
      position: absolute;
      left: 10px;
      top: 0.4rem;
      line-height: 0.3rem;
      color: darkred;
    }
  }
}
</style>
